<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { ViewData } from '@/api/types/userType'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { ref, unref, reactive } from 'vue'
import Edit from './components/Edit.vue'
import Detail from './components/Detail.vue'
import ClassReport from './components/ClassReport.vue'
import api from '@/api'

defineOptions({
    name: 'schoolCategory'
})
const { addTest, modifyTest, deleteTest, getTests } = api
const { register, tableObject, methods } = useTable<ViewData>({
    getListApi: getTests,
    delListApi: (param) => {
        return deleteTest({ ids: param })
    },
    response: {
        list: 'content',
        total: 'totalElements'
    }
})

const { getList, setSearchParams } = methods
const crudSchemas = reactive<CrudSchema[]>([
    {
        field: 'index',
        label: '序号',
        type: 'index',
        form: {
            show: false
        },
        detail: {
            show: false
        }
    },{
        field:"orgName",
        label:"机构名称",
        search:{show:true},
        width:"270px",
        form: { colProps: { span: 24 } },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'member_no',
        label: '会员编号',
        width:"100px",
        search: { show: true },
        form: { colProps: { span: 24 } },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'name',
        label: '姓名',
        width:"80px",
        search: { show: true },
        form: { colProps: { span: 24 } },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'showAge',
        label: '年龄',
        width:"90px",
        search: { show: true },
        form: { colProps: { span: 24 },component:"InputNumber" },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'sex',
        label: '性别',
        width:"60px",
        form: {
            colProps: { span: 24 },
        },
        detail: { span: 2, width: 100 }
    },{
        field:'className',
        label:'班级',
        width:"180px",
        detail: { span: 2, width: 100 }
    },{
        field:"check_type",
        label:"评测类型",
        width:"120px",
        formatter: (_,__,row) => {
            return row.check_type=="1"?"复核测评":"默认评测"
        },
        detail: { span: 2, width: 100 }
    },
    {
        field: 'testDate',
        label: '评测日期',
        width:"170px",
        search: { show: true ,
            component:"DatePicker",
            componentProps:{
                type:"daterange",
                valueFormat:"YYYY-MM-DD"
            }
        },
    },
    {
        field: 'action',
        width: '160px',
        label: '操作',
        fixed: 'right',
        form: { show: false },
        detail: { show: false }
    }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
const dialogVisible = ref(false)
const classReportVisible=ref(false)
const dialogTitle = ref('')
getList()

const AddAction = () => {
    dialogTitle.value = '添加'
    tableObject.currentRow = null
    actionType.value = 'add'
    dialogVisible.value = true
}

const delLoading = ref(false)

const delData = async (row: ViewData | null, multiple: boolean) => {
    tableObject.currentRow = row
    const { delList, getSelections } = methods
    const selections = await getSelections()
    delLoading.value = true
    await delList(
        multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
        multiple
    ).finally(() => {
        delLoading.value = false
    })
}
const actionType = ref('')

const action = (row: ViewData, type: string) => {
    dialogTitle.value = type === 'edit' ? '编辑' : '详情'
    actionType.value = type
    tableObject.currentRow = row
    dialogVisible.value = true
}

const writeRef = ref<ComponentRef<typeof Edit>>()

const loading = ref(false)

const save = async () => {
    const write = unref(writeRef)
    await write?.elFormRef?.validate(async (isValid) => {
        if (isValid) {
            loading.value = true
            const data = (await write?.getFormData()) as ViewData
            let apiReques = data.id ? modifyTest : addTest

            const res = await apiReques(data)
                .catch(() => {})
                .finally(() => {
                    loading.value = false
                })
            if (res) {
                dialogVisible.value = false
                tableObject.currentPage = 1
                getList()
            }
        }
    })
}
</script>

<template>
    <ContentWrap>
        <Search
            :schema="allSchemas.searchSchema"
            @search="setSearchParams"
            @reset="setSearchParams"
        />

        <div class="mb-10px">
            <ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
                删除
            </ElButton>
            <ElButton @click="classReportVisible=true" type="warning">下载班级报告</ElButton>
        </div>

        <Table
            v-model:pageSize="tableObject.pageSize"
            v-model:currentPage="tableObject.currentPage"
            :columns="allSchemas.tableColumns"
            :data="tableObject.tableList"
            :loading="tableObject.loading"
            :pagination="{
                total: tableObject.total
            }"
            @register="register"
        >
            <template #action="{ row }">
                <!-- <ElButton type="primary" @click="action(row, 'edit')"> 编辑 </ElButton> -->
                <ElButton type="primary" @click="action(row, 'detail')"> 查看 </ElButton>
                <ElButton type="danger" @click="delData(row, false)"> 删除 </ElButton>
            </template>
        </Table>
    </ContentWrap>

    <Dialog v-model="dialogVisible" :title="dialogTitle" max-height="380px" width="500px">
        <Edit
            v-if="actionType !== 'detail'"
            ref="writeRef"
            :form-schema="allSchemas.formSchema"
            :current-row="tableObject.currentRow"
        />

        <Detail
            v-if="actionType === 'detail'"
            :detail-schema="allSchemas.detailSchema"
            :current-row="tableObject.currentRow"
        />

        <template #footer>            
            <ElButton @click="dialogVisible = false">关闭</ElButton>
        </template>
    </Dialog>
    <Dialog v-model="classReportVisible" title="下载班级报告" max-height="220px" width="800px">
        <ClassReport />
        <template #footer>
            <ElButton @click="classReportVisible = false">关闭</ElButton>
        </template>
    </Dialog>
</template>
{
    "testCount": new NumberInt("0"),
    "data": [
      {
        "itemName": "听觉广度",
        "minScore": 25.01,
        "level": "中等",
        "startVersion": new NumberInt("0"),
        "item_score": 30,
        "levelScore": new NumberInt("4"),
        "testType": "听觉",
        "id": "d85db37b337b41719f63d56f72418867",
        "maxScore": 30,
        "version": new NumberInt("0"),
        "item_no": "1"
      },
      {
        "itemName": "听觉记忆",
        "minScore": 5.01,
        "level": "不足",
        "startVersion": new NumberInt("0"),
        "item_score": 10,
        "levelScore": new NumberInt("3"),
        "testType": "听觉",
        "id": "1ba61570951b41b394fbbb3c5d5f3702",
        "maxScore": 10,
        "version": new NumberInt("0"),
        "item_no": "2"
      },
      {
        "itemName": "听觉加工",
        "minScore": 0,
        "level": "极弱",
        "startVersion": new NumberInt("0"),
        "item_score": 2,
        "levelScore": new NumberInt("1"),
        "testType": "听觉",
        "id": "d255607e68e14b09883ea8bffc980626",
        "maxScore": 4.55,
        "version": new NumberInt("0"),
        "item_no": "3"
      },
      {
        "itemName": "听觉稳定",
        "minScore": 29.68,
        "level": "中等",
        "startVersion": new NumberInt("0"),
        "item_score": 32,
        "levelScore": new NumberInt("4"),
        "testType": "听觉",
        "id": "73ed5f9d22464a519af641d9dc27b06f",
        "maxScore": 39.67,
        "version": new NumberInt("0"),
        "item_no": "4"
      },
      {
        "itemName": "视觉分辨",
        "minScore": 0,
        "level": "极弱",
        "startVersion": new NumberInt("0"),
        "item_score": 82,
        "levelScore": new NumberInt("1"),
        "testType": "视觉",
        "id": "5ac707b131974ae4bc5d0c1df7d12524",
        "maxScore": 91.12,
        "version": new NumberInt("0"),
        "item_no": "5"
      },
      {
        "itemName": "视觉广度",
        "minScore": 11.38,
        "level": "较弱",
        "startVersion": new NumberInt("0"),
        "item_score": 15,
        "levelScore": new NumberInt("2"),
        "testType": "视觉",
        "id": "7c19821ef4914c098c5bdaa5fafeb861",
        "maxScore": 15.91,
        "version": new NumberInt("0"),
        "item_no": "6"
      },
      {
        "itemName": "视觉记忆",
        "minScore": 36.38,
        "level": "优秀",
        "startVersion": new NumberInt("0"),
        "item_score": 45,
        "levelScore": new NumberInt("5"),
        "testType": "视觉",
        "id": "c0bb7ea912a3453a9d192ddc489089fe",
        "maxScore": 100,
        "version": new NumberInt("0"),
        "item_no": "7"
      },
      {
        "itemName": "手部控制",
        "minScore": 29.01,
        "level": "中等",
        "startVersion": new NumberInt("0"),
        "item_score": 38,
        "levelScore": new NumberInt("4"),
        "testType": "视觉",
        "id": "3cee93540991426db120cafc8bc5ccb8",
        "maxScore": 41,
        "version": new NumberInt("0"),
        "item_no": "8"
      },
      {
        "itemName": "视觉加工",
        "minScore": 20.01,
        "level": "不足",
        "startVersion": new NumberInt("0"),
        "item_score": 22,
        "levelScore": new NumberInt("3"),
        "testType": "视觉",
        "id": "4734380629184709af84c492a42f7ed2",
        "maxScore": 25,
        "version": new NumberInt("0"),
        "item_no": "9"
      }
    ],
    "downloadDate": null,
    "member_no": "0000051",
    "check_type": "0",
    "className": "银河班",
    "pid": "5D0A349417DB4B8E8076D7D5F501759D",
    "orgId": "ccfb13dedc3446bbb6fab29c1e797c10",
    "averageScore": 3,
    "teacher": "梁雨男",
    "id": "7392981b11044a6cb95817e6aa5f2482",
    "downloadCourse": false,
    "memberId": "3aac1a109f764c4ebb073d4f379a8aaa",
    "orgName": "洛阳市西工区麦苗苗幼儿园",
    "last": true,
    "sex": "男",
    "startVersion": new NumberInt("0"),
    "birth": "2020-02-12",
    "totalScore": 27,
    "version": new NumberInt("0"),
    "showAge": "4岁8个月",
    "typeAverage": {
      "视觉": 3,
      "听觉": 3
    },
    "name": "王致中",
    "classYear": "2024",
    "typeTotal": {
      "视觉": 15,
      "听觉": 12
    },
    "age": "4",
    "testDate": new ISODate("2024-10-22T08:18:27.734Z")
  }